<template>
  <n-grid cols="1" responsive="screen">
    <n-grid-item span="4">  
      <div class="logo">
           <n-icon size="180">
    <svg version="1.1" id="svg10" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 380 280" style="enable-background:new 0 0 380 280;" xml:space="preserve">
<g id="container" transform="translate(66.625,103.5)">
	<g id="g8">
		<path id="path4" class="st0" d="M91.1-32.3C26.7-27.9-8.5,3.2-14.7,61.1h-47.9C-37.9-1.2,13.3-32.3,91.1-32.3z"></path>
		<path id="path6" class="st0" d="M60.9-22.1c42.2-12.3,73.3-4.7,93.4,22.9h-30.9C108.5-17.8,87.7-25.5,60.9-22.1z"></path>
	</g>
	<g id="text14">
		<path id="path59" class="st1" d="M44,52.2H24.6v-3H44V52.2z M44,40.8v2.6H24.6v-2.6H44z M44.3,35.3H24.6v-2.5h19.6V35.3z
			 M24.6,27.3v-2.8h19.6v2.8H24.6z M38.6,6c0.6-0.6,0.6-1.1,0-1.4c-2.9-0.3-5.8-0.5-8.9-0.5v4.7H9v6h20.7v3.6H16.5v33.7H7v6.6h56
			v-6.6H52.6V18.5H38.2v-3.6h21.8v-6H38.2V7.7C38.2,6.9,38.3,6.3,38.6,6z"></path>
	</g>
	<g id="text16">
		<path id="path62" class="st1" d="M76.1,60.5c4.6-2.5,8.4-5.7,11.4-9.9s4.6-9,4.8-14.5v-2.7h9.2v26.7h8.1V33.4h13.6v-6.8h-13.6
			V10.5c0-1.8,0.3-3.1,0.7-3.7c0.7-0.6,0.5-1-0.6-1.3c-2.7-0.1-5.5-0.2-8.2-0.4v21.6h-9.2V14.3c2.5-0.4,4.3-0.7,5.4-1
			c1.4,0.4,2,0.2,1.7-0.5c-1-2.5-1.9-5-3-7.3c-7.9,2.9-16.3,4.7-25.1,5.3c1.5,2,2.6,4.3,3.4,6.9c3.2-0.5,6.2-1.1,9.2-1.8v10.7H69
			v6.8H84v2c-0.1,4.6-1.6,8.4-4.5,11.6c-2.9,3.1-6.5,5.7-10.9,8C72.1,56.9,74.6,58.8,76.1,60.5z"></path>
	</g>
	<g id="text18">
		<path id="path65" class="st1" d="M178.4,51.2c-0.6,0-0.9-0.1-1-0.5V6.8h-20.1v25.7c0.1,4.8-0.6,9.1-1.9,12.8
			c-1.4,3.7-4.1,6.8-8.1,9.4c2.5,1.3,4.6,2.9,6.6,4.9c3.9-3.3,6.5-7.2,8.1-11.6c1.6-4.5,2.3-9.3,2.3-14.6V13.5h5.2v40.7
			c0,3.4,1.7,4.9,5.2,4.6h6.4c2.4-0.1,3.9-1.1,4.6-3.1c0.7-2,1.1-4.6,1.1-7.9c-2.3-0.2-4.6-0.6-6.7-1.2c0.5,2.7,0.2,4.2-1.1,4.6
			C178.9,51.2,178.4,51.2,178.4,51.2z M134.3,47.6c2-2.4,3.7-4.9,5.2-7.5v19.8h7.3V34.6c1.1,2,2.3,4.1,3.4,6.3l6.1-3.9
			c-1.6-3.3-3.4-6.5-5.3-9.6l-4.2,2.6v-6.6h7.8V17h-7.8V8.3c0-1,0.3-1.8,0.7-2.4c0.4-0.4,0.2-0.8-0.4-1.1c-1.8-0.3-3.7-0.5-5.8-0.6
			h-1.9V17H130v6.4h9c-2,7.5-5.3,13.8-10.1,19C131.3,44.1,133.1,45.8,134.3,47.6L134.3,47.6z"></path>
	</g>
	<g id="text20">
		<path id="path68" class="st1" d="M246.9,41.2c-3.9-7.5-8.3-14.8-13.2-21.9c-2.8,1.6-5.3,2.9-7.5,3.9c5.3,6.8,9.4,14.4,12.5,22.6
			C241.3,44.1,244,42.6,246.9,41.2z M208.9,23.3c0.6-0.5,0.5-0.9-0.1-1.4l-8.6-2.8c-2.2,9.4-5.6,17.6-10,24.6
			c2.6,0.8,5.1,1.9,7.7,3.2C201.8,38.9,205.5,31,208.9,23.3z M223,6.4c0.2-0.4,0-0.7-0.5-0.8c-0.8-0.1-2.2-0.2-4.1-0.4h-4.3V49
			c-0.1,1.4-1,2.1-2.6,2.3c-1.6,0.1-3.2,0.1-4.9-0.1c1.2,2.5,2.2,5.3,3,8.4c3.5,0.4,6.5,0.1,9-0.8c2.5-0.9,3.9-2.8,4-5.6V9.1
			C222.6,8,222.7,7.1,223,6.4z"></path>
	</g>
	<g id="text22">
		<path id="path71" class="st1" d="M264.1,25.9c3.4,3.6,5.1,6.7,5,9.3c0,2.7-2.2,4-6.5,4.1V13h5.8C267.6,17.1,266.2,21.4,264.1,25.9
			z M272.6,24.3c1.6-6,3.5-12,5.7-17.9h-23.4v52.8h7.8V40.6c1.7,1.7,2.7,4,3,6.7c7.8-0.3,11.7-4,11.6-11.1
			C276.9,31.9,275.3,27.9,272.6,24.3L272.6,24.3z M294.3,6.7c0.6-1-0.1-1.7-2.3-2c-2.1-0.3-4.1-0.5-5.9-0.5h-1.6v14.6
			c0.1,8.2-1.1,15.1-3.6,20.8c-2.5,5.6-6.7,10.8-12.9,15.5c2.9,1.4,5.5,3.2,7.7,5.4c2.9-2.5,5.4-5.4,7.8-8.7
			c2.3-3.4,4.3-6.9,5.8-10.6c3.3,7.9,7.9,14.3,13.7,19.2c1.6-2.4,3.7-4.9,6.3-7.6c-4.3-2.9-7.9-6.9-11-12.1
			c-3.1-5.1-4.6-10.5-4.7-16.1V10.2C293.6,8.6,293.8,7.4,294.3,6.7L294.3,6.7z"></path>
	</g>
	<g id="text24">
		<path id="path74" class="st1" d="M-47.5,77.4l-3.4,10.9h-1.9l-1.7-6.6c0,0-0.1-0.3-0.2-0.9s-0.2-0.9-0.2-1h0l-2.2,8.4h-1.9
			l-3.4-10.9h1.9l2.4,8.7l0.4-1.5l1.9-7.2h1.9l1.5,5.7c0.4,1.6,0.6,2.5,0.7,2.7h0l2.5-8.4H-47.5z"></path>
	</g>
	<g id="text26">
		<path id="path77" class="st1" d="M-29.3,77.4l-3.4,10.9h-1.9l-1.7-6.6c0,0-0.1-0.3-0.2-0.9c-0.1-0.6-0.2-0.9-0.2-1h0l-2.2,8.4H-41
			l-3.4-10.9h1.9L-40,86l0.4-1.5l1.9-7.2h1.9l1.5,5.7c0.4,1.6,0.6,2.5,0.7,2.7h0l2.5-8.4H-29.3z"></path>
	</g>
	<g id="text28">
		<path id="path80" class="st1" d="M-11.1,77.4l-3.4,10.9h-1.9l-1.7-6.6c0,0-0.1-0.3-0.2-0.9c-0.1-0.6-0.2-0.9-0.2-1h0l-2.2,8.4
			h-1.9l-3.4-10.9h1.9l2.4,8.7l0.4-1.5l1.9-7.2h1.9l1.5,5.7c0.4,1.6,0.6,2.5,0.7,2.7h0l2.5-8.4H-11.1z"></path>
	</g>
	<g id="text30">
		<path id="path83" class="st1" d="M-4.1,88.3h-2.1v-2.1h2.1V88.3z"></path>
	</g>
	<g id="text32">
		<path id="path86" class="st1" d="M11.8,88.3H9.8C9.6,88,9.5,87.5,9.4,87c-1.2,1.1-2.6,1.6-4,1.6c-1.2,0-2.1-0.3-2.7-0.9
			c-0.7-0.6-1-1.3-1-2.3c0-0.9,0.3-1.7,1-2.2c0.6-0.6,1.8-1,3.3-1.2l1.7-0.3c0.6-0.1,1.2-0.2,1.6-0.4c0-0.6,0-0.9-0.1-1.2
			c0-0.2-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.4-0.8-0.6c-0.4-0.2-0.9-0.2-1.5-0.2c-0.8,0-1.4,0.1-1.9,0.4c-0.5,0.3-0.8,0.8-0.9,1.6
			L2,80.5c0.2-1.1,0.7-2,1.5-2.5c0.8-0.6,2-0.8,3.4-0.8c1.3,0,2.3,0.2,2.9,0.6c0.6,0.4,1,0.9,1.1,1.4c0.1,0.5,0.2,1.3,0.2,2.1v2.5
			c0,1.5,0,2.5,0.1,3.1C11.3,87.3,11.5,87.8,11.8,88.3z M9.3,83.5v-0.7c-1,0.3-2.2,0.6-3.6,0.8c-1.4,0.2-2.1,0.8-2.1,1.8
			c0,0.5,0.2,0.9,0.6,1.2c0.4,0.3,0.9,0.5,1.6,0.5c0.9,0,1.7-0.3,2.4-0.8C9,85.8,9.3,84.8,9.3,83.5z"></path>
	</g>
	<g id="text34">
		<path id="path89" class="st1" d="M22.7,77.7l-0.6,1.7c-0.5-0.3-0.9-0.4-1.3-0.4c-0.7,0-1.2,0.3-1.6,0.9c-0.4,0.6-0.5,1.5-0.5,2.6
			v5.7h-1.9V77.4h1.7V79h0c0.6-1.3,1.4-1.9,2.3-1.9C21.4,77.1,22.1,77.3,22.7,77.7z"></path>
	</g>
	<g id="text36">
		<path id="path92" class="st1" d="M43.5,88.3h-1.9v-6.9c0-0.5,0-0.9-0.1-1.3c-0.1-0.4-0.2-0.7-0.5-1c-0.3-0.3-0.7-0.4-1.3-0.4
			c-0.7,0-1.4,0.3-1.9,0.8C37.3,80,37,80.8,37,82v6.3h-1.9v-7.1c0-0.9-0.2-1.6-0.5-1.9c-0.3-0.4-0.8-0.5-1.4-0.5
			c-0.8,0-1.5,0.3-2,0.8c-0.5,0.5-0.8,1.6-0.8,3.1v5.7h-1.9V77.4h1.7v1.5h0c0.7-1.2,1.8-1.8,3.3-1.8c0.8,0,1.5,0.2,2,0.5
			c0.5,0.3,0.9,0.8,1.1,1.4c0.8-1.3,1.9-1.9,3.4-1.9c1.1,0,2,0.3,2.5,0.9c0.6,0.6,0.9,1.5,0.9,2.7V88.3z"></path>
	</g>
	<g id="text38">
		<path id="path95" class="st1" d="M59,88.3h-1.9c-0.2-0.3-0.3-0.8-0.4-1.3c-1.2,1.1-2.6,1.6-4,1.6c-1.2,0-2.1-0.3-2.7-0.9
			c-0.7-0.6-1-1.3-1-2.3c0-0.9,0.3-1.7,1-2.2c0.6-0.6,1.8-1,3.3-1.2l1.7-0.3c0.6-0.1,1.2-0.2,1.6-0.4c0-0.6,0-0.9-0.1-1.2
			c0-0.2-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.4-0.8-0.6s-0.9-0.2-1.5-0.2c-0.8,0-1.4,0.1-1.9,0.4c-0.5,0.3-0.8,0.8-0.9,1.6l-1.8-0.2
			c0.2-1.1,0.7-2,1.5-2.5c0.8-0.6,2-0.8,3.4-0.8c1.3,0,2.3,0.2,2.9,0.6c0.6,0.4,1,0.9,1.1,1.4c0.1,0.5,0.2,1.3,0.2,2.1v2.5
			c0,1.5,0,2.5,0.1,3.1C58.6,87.3,58.7,87.8,59,88.3z M56.6,83.5v-0.7c-1,0.3-2.2,0.6-3.6,0.8c-1.4,0.2-2.1,0.8-2.1,1.8
			c0,0.5,0.2,0.9,0.6,1.2c0.4,0.3,0.9,0.5,1.6,0.5c0.9,0,1.7-0.3,2.4-0.8C56.2,85.8,56.6,84.8,56.6,83.5z"></path>
	</g>
	<g id="text40">
		<path id="path98" class="st1" d="M70.7,80.2c0.9,0.2,1.6,0.6,2.1,1.4c0.5,0.7,0.7,1.5,0.7,2.4c0,1.4-0.5,2.5-1.5,3.4
			c-1,0.9-2.2,1.3-3.6,1.3c-1.3,0-2.4-0.4-3.3-1.2c-0.9-0.8-1.4-1.8-1.5-3.1l1.9-0.3c0.2,1,0.5,1.7,1,2.2c0.5,0.5,1.1,0.7,1.9,0.7
			c0.9,0,1.6-0.3,2.2-0.9c0.6-0.6,0.9-1.4,0.9-2.2c0-0.8-0.3-1.5-0.8-2.1c-0.5-0.6-1.3-0.8-2.1-0.8c-0.4,0-0.8,0.1-1.3,0.2l0.2-1.6
			c0.5,0,0.9,0,1.2-0.1c0.3,0,0.6-0.2,1-0.4c0.4-0.2,0.7-0.4,0.9-0.8c0.2-0.4,0.4-0.8,0.4-1.3c0-0.7-0.3-1.3-0.8-1.7
			c-0.5-0.4-1.1-0.6-1.7-0.6c-0.7,0-1.4,0.2-1.8,0.7c-0.5,0.5-0.8,1.1-0.9,2l-1.9-0.3c0.2-1.3,0.8-2.3,1.6-2.9c0.8-0.7,1.8-1,2.9-1
			c1.3,0,2.3,0.4,3.1,1.1c0.8,0.8,1.3,1.7,1.3,2.8C72.7,78.5,72,79.5,70.7,80.2L70.7,80.2z"></path>
	</g>
	<g id="text42">
		<path id="path101" class="st1" d="M81.2,88.3h-2.1v-2.1h2.1V88.3z"></path>
	</g>
	<g id="text44">
		<path id="path104" class="st1" d="M96.5,77.4l-4.1,10.9h-1.7l-4.2-10.9h2l2.3,6.3c0.4,1.2,0.7,2,0.8,2.4h0c0.1-0.4,0.3-1,0.6-1.8
			l2.5-7H96.5z"></path>
	</g>
	<g id="text46">
		<path id="path107" class="st1" d="M103,88.3h-1.9V77.4h1.9V88.3z M103,75.3h-1.9v-2.1h1.9V75.3z"></path>
	</g>
	<g id="text48">
		<path id="path110" class="st1" d="M110.5,78.8c0.7-1.1,1.7-1.7,3.1-1.7c1.4,0,2.6,0.5,3.4,1.6c0.8,1,1.2,2.4,1.2,4.1
			c0,1.8-0.5,3.2-1.4,4.2c-0.9,1-2,1.6-3.4,1.6c-1.2,0-2.1-0.5-2.8-1.4h-0.1v5.3h-1.9V77.4h1.7L110.5,78.8L110.5,78.8z M113.4,87.1
			c0.9,0,1.6-0.4,2.1-1.1c0.6-0.7,0.9-1.8,0.9-3.2c0-1.3-0.3-2.4-0.8-3.1c-0.5-0.7-1.2-1.1-2.1-1.1c-0.9,0-1.6,0.4-2.2,1.2
			c-0.6,0.8-0.8,1.8-0.8,3.1c0,1.4,0.3,2.4,0.8,3.1S112.5,87.1,113.4,87.1z"></path>
	</g>
</g>
</svg>
  </n-icon>
      </div>
    </n-grid-item>
    <n-grid-item span="6">
      <div class="menu">
            <n-menu v-model:value="vv" mode="horizontal" :options="menuOptions" />
      </div>
    </n-grid-item>
  </n-grid>


</template>

<script>
import { onMounted, ref,h} from "vue";
import { NIcon } from "naive-ui";
import {
  GameController,
  Airplane,
  FlashOutline,
  Cash,
    BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon
} from "@vicons/ionicons5";

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const vv = ref(null)
const menuOptions = [
  {
    label: () => h("a", {
      href: "https://www.arma3.cn",
      target: "_blank",
      rel: "home"
    }, "首页"),
    key: "home",
    icon: renderIcon(BookIcon)
  },
  {
    label: "工具",
    key: "pinball-1973",
    icon: renderIcon(BookIcon),
    disabled: false,
    children: [
      {
        label: "火炮",
        key: "hp",
		icon: renderIcon(PersonIcon)
      }
    ]
  },
   {
    label: () => h("a", {
      href: "https://www.arma3.cn",
      target: "_blank",
      rel: "gy"
    }, "关于"),
    key: "gy",
    icon: renderIcon(BookIcon)
  },
//   {
//     label: "舞，舞，舞",
//     key: "dance-dance-dance",
//     icon: renderIcon(BookIcon),
//     children: [
//       {
//         type: "group",
//         label: "人物",
//         key: "people",
//         children: [
//           {
//             label: "叙事者",
//             key: "narrator",
//             icon: renderIcon(PersonIcon)
//           },
//           {
//             label: "羊男",
//             key: "sheep-man",
//             icon: renderIcon(PersonIcon)
//           }
//         ]
//       },
//       {
//         label: "饮品",
//         key: "beverage",
//         icon: renderIcon(WineIcon),
//         children: [
//           {
//             label: "威士忌",
//             key: "whisky"
//           }
//         ]
//       },
//       {
//         label: "食物",
//         key: "food",
//         children: [
//           {
//             label: "三明治",
//             key: "sandwich"
//           }
//         ]
//       },
//       {
//         label: "过去增多，未来减少",
//         key: "the-past-increases-the-future-recedes"
//       }
//     ]
//   }
];

export default {
  name: "Home",
  components: {
    GameController,
    Airplane,
    FlashOutline,
    Cash,
  },
  setup() {
    console.log("head测试");
    onMounted(()=>{
    })
    return{
        vv,
        menuOptions
    }
  },
};


</script>

<style>
.logo {
  /* background-color: bisque; */
  height: 100px;
  text-align: center;
}
.menu {
  /* background-color: aquamarine; */
  text-align: center;
  height: 100%;
  margin: 2rem;
}
</style>